<template>
  <div class="pagination-warp">
    <a-pagination
      simple
      :current="pageConfig?.pageNum"
      :pageSize="pageConfig?.pageSize"
      :total="total"
      @change="onHandleCurrentChange"
      @showSizeChange="onHandleSizeChange"
    />
    <div class="btns">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
const state = reactive({
  page: {
    pageNum: 1,
    pageSize: 20,
  },
});

const props = defineProps({
  pageConfig: {
    type: Object,
    default: () => {},
  },
  total: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["pageChange"]);

const onHandleSizeChange = (current: number, size: number) => {
  state.page.pageSize = size;
  console.log(current, size, "1");

  emit("pageChange", state.page);
};
const onHandleCurrentChange = (current: number, size: number) => {
  state.page.pageNum = current;
  console.log(current, size, "2");

  emit("pageChange", state.page);
};
</script>
<style scoped lang="less">
.pagination-warp {
  display: flex;
  justify-content: space-between;
  height: 32px;
  align-items: center;
  margin-top: 8px;
}
</style>
